<template>
  <div class="index-container">
    <div class="pack_live_div">
      <div class="pack_live_left">
        <img :src="List.avatar" class="pack_live_touxiang" />
        <div style="padding: 12px 0 0 10px">
          <div class="pack_live_name">
            <i class="mr5">{{ List.name }}</i>
            <van-icon :name="require('@/assets/images/teacher-vip.png')" />
          </div>
          <div class="pack_live_name1">{{ List.cert }}</div>
        </div>
      </div>
      <div class="pack_live_content">{{ List.intro }}</div>
    </div>

    <van-divider />

    <!-- 热门推荐 -->
    <div class="hots">
      <div class="headline">
        <span class="h_left">
          <van-icon :name="require('@/assets/images/hot.png')" />
          <i class="ml10">热门推荐</i>
        </span>
      </div>
      <van-list :loading="loading" :finished="finished" finished-text="我也是有底线的" @load="onLoad">
        <van-grid :gutter="15" :border="false" :column-num="2">
          <van-grid-item v-for="(item, index) in packList" :key="index">
            <van-image width="100%" height="105" :src="item.cover" />
            <div class="content">
              <h3 class="title">2022年临床公开课—心电图/ 影像学上手难？</h3>
              <div class="jiage">
                抢购价:
                <span>
                  <i>¥</i>
                  <i style="font-size: 18px">{{ item.price }}</i>
                </span>
              </div>
              <div class="xuexi">{{ item.init_sale_num }}人已学习</div>
            </div>
          </van-grid-item>
        </van-grid>
      </van-list>
    </div>
  </div>
</template>

<script>
import { infoTeacher } from '@/api/teachers'
import { getGoodsLists } from '@/api/home/pack'
export default {
  data() {
    return {
      queryParams: {
        teacher_id: null,
        // cate_id: 2,
        page: 1
      },
      List: {},
      packList: [],
      loading: false,
      finished: false
    }
  },
  computed: {},
  mounted() {
    this.fetchList()
  },

  methods: {
    // 初始化数据
    fetchList() {
      this.queryParams.teacher_id = this.$route.query.id
      infoTeacher(this.queryParams).then(res => {
        this.List = res.data
      })
    },
    async onLoad() {
      this.loading = true
      await getGoodsLists(this.queryParams).then(res => {
        this.packList = this.packList.concat(res.data)
        this.queryParams.page = this.queryParams.page + 1
        this.total = res.data.total
        if (res.data.length < 10) {
          this.finished = true
        }
      })
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  background: #ffffff;
  overflow: hidden;
  .pack_live_div {
    box-sizing: border-box;
    padding: 15px 15px 20px;
    margin: 15px 15px 0;
    background: url('@/assets/images/home_teacher_box.png');
    background-size: 100% 100%;
    border-radius: 10px;
    .pack_live_left {
      display: flex;
      .pack_live_touxiang {
        width: 66px;
        height: 66px;
        border-radius: 50%;
      }
      .pack_live_name {
        font-size: 14px;
        font-weight: 600;
        color: #333333;
      }
      .pack_live_name1 {
        font-size: 13px;
        font-weight: 400;
        color: #333333;
        line-height: 36px;
      }
    }
    .pack_live_content {
      margin-top: 15px;
      font-size: 14px;
      color: #333333;
      line-height: 22px;
    }
  }
  .hots {
    // padding: 0 30px;
    ::v-deep .van-grid {
      margin-top: 20px;
      .van-grid-item {
        box-shadow: 0px 1.5px 4px 0px rgba(210, 212, 213, 0.2);
        border-radius: 5px;
      }
      .van-grid-item__content {
        box-shadow: 0px 1px 4px 0px rgba(210, 212, 213, 0.2);
        border-radius: 5px;
        padding: 0;
        overflow: hidden;
      }
      .content {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px 10px;
        .title {
          font-size: 14px;
          font-weight: 600;
          color: #333333;
          line-height: 21px;
          @include textoverflow(1);
        }
        .jiage {
          font-size: 12px;
          color: #009697;
          line-height: 30px;
        }
        .xuexi {
          display: table;
          // margin-top: 10px;
          min-width: 75px;
          padding: 0 5px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: #11a8a4;
          background: rgba(7, 120, 121, 0.1);
          border-radius: 2px;
        }
        .van-button {
          width: 27px;
          height: 14px;
          background: #fd953f;
          padding: 0;
          vertical-align: bottom;
          .van-button__text {
            font-size: 14px;
            font-weight: bold;
            color: #fffefe;
          }
        }
        .open_price {
          font-size: 9px;
          font-weight: 800;
          color: #009697;
          // line-height: 30px;
        }
        .open_number {
          margin-left: 4px;
          line-height: 14px;
          font-size: 6px;
          font-weight: 500;
          text-decoration: line-through;
          color: #999999;
        }
      }
    }
  }
}
</style>
